<template>
	<view class="applyPayout">
		<text class="applyPayout-title">可提现金额：{{count1}}元</text>
		<view class="applyPayout-money">
			<text class="applyPayout-money-icon">￥</text>
			<u--input placeholder="请输入提现金额" border="none" v-model="formObj.money"
				:disabled="formObj.applytype==2||count1<0?true:false" @change="numberInput"
				@blur="blurNumber"></u--input>
		</view>
		<text class="applyPayout-title">选择提现方式</text>
		<view class="applyPayout-payfor">
			<u-radio-group v-model="payfor" iconPlacement="right">
				<u-radio class="pay-cloose" activeColor="#333" name="zhifubao">
					<view class="pay-cloose-item">
						<u-icon class="pay-cloose-item-icon zhifubao" color="#fff" name="zhifubao" size="30"></u-icon>
						<text>提现至支付宝</text>
					</view>
				</u-radio>
				<u-radio class="pay-cloose" activeColor="#333" name="weixin">
					<view class="pay-cloose-item">
						<u-icon class="pay-cloose-item-icon weixin" color="#fff" name="weixin-fill" size="30"></u-icon>
						<text>提现至微信</text>
					</view>
				</u-radio>
				<u-radio class="pay-cloose" activeColor="#333" name="yinlian">
					<view class="pay-cloose-item">
						<u-icon class="pay-cloose-item-icon" color="#fff" name="/static/image/commission/yinlian.png"
							size="30"></u-icon>
						<text>提现至银行卡</text>
					</view>
				</u-radio>
			</u-radio-group>
		</view>
		<view class="showPayform">
			<u-button class="button" color="#ff7a00" type="primary" text="确定" shape="circle" @click="openPopup"
				:disabled="Number(count1)<=0"></u-button>
		</view>
		<pay-popup :showPopup.sync="showPopup" :formObj="formObj" :formList="formList"></pay-popup>
	</view>
</template>

<script>
	import payPopup from './compoments/payPopup.vue'
	import {
		publicConfig
	} from '@/api'
	import payforList from './payforList.js'
	export default {
		onLoad(options) {
			// applytype=> 1提现，2退保证金 2的时候禁用 并自动赋值
			this.formObj.applytype = options?.applytype ?? 1
			this.getCount()
		},
		components: {
			payPopup
		},
		data() {
			return {
				payfor: '',
				showPopup: false,
				formList: [],
				count1: '0.00',
				formObj: {
					money: '',
					applytype: '',
					payment_type: ''
				},
			}
		},
		methods: {
			async getCount() {
				let api = {
					1: 'getUserpriceCount',
					2: 'getRetentionCount'
				}
				const {
					data,
					code
				} = await publicConfig(api[this.formObj.applytype])
				if (code === 1) {
					this.count1 = data.count3 ?? data.count1
					if (this.formObj.applytype == 2) {
						this.formObj.money = this.count1
					}
				}
			},
			blurNumber(e) {
				this.formObj.money = Number(this.formObj.money)
			},
			openPopup() {
				if (this.formObj.money.length === 0 || Number(this.formObj.money) === 0) {
					return this.toast('请输入金额')
				}
				if (this.payfor.length === 0) {
					return this.toast('请选择提现方式')
				}
				this.showPopup = true
				this.formObj.payment_type = this.payfor
				this.formList = payforList.getList(this.payfor)
			},
			async numberInput(e) {
				e = e.toString()
				await this.$nextTick()
				this.formObj.money = e.replace(/^\D*(^\d{0,10}(?:\.\d{0,2})?).*$/g, "$1")
				if (Number(this.formObj.money) > this.count1) {
					this.formObj.money = this.count1
				}
				this.$forceUpdate()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.applyPayout {
		background-color: #fff;
		height: calc(100% - 20rpx - 1px);
		margin-top: 20rpx;
		color: #333333;
		padding-top: 40rpx;

		&-title {
			font-size: 29rpx;
			font-weight: bold;
			padding-left: 50rpx;
		}

		&-money {
			margin-top: 20rpx;
			margin-bottom: 50rpx;
			display: flex;
			height: 80rpx;
			border-bottom: 0.5px solid #F7F7F7;
			padding: 0 50rpx;

			&-icon {
				font-size: 50rpx;
			}
		}
	}

	.pay-cloose {
		border: 0.5px solid #F6F6F6;
		border-radius: 10rpx;
		// height: 80rpx;
		margin: 30rpx 30rpx 0 30rpx;
		padding: 20rpx;

		&-item {
			display: flex;
			align-items: center;
			font-size: 29rpx;
			color: #333333;

			&-icon {
				margin-right: 20rpx;
			}
		}
	}

	.zhifubao {
		background-color: #0c60e2;
		border-radius: 20rpx;
	}

	.weixin {
		background-color: #3caf34;
		border-radius: 20rpx;
	}

	/deep/.u-radio-group--row {
		display: block;
	}

	.showPayform {
		padding: 100rpx
	}
</style>